<template>
  <el-button @click="preview">点击报表预览 当前版本:{{xzreportdesigner_version}}</el-button>
  <div style="height: 100%" id="reportPreview_tabs1_echo"></div>
</template>
<script setup>


const reportDesignerId = "xzReportDesignerTabs1"
import {usePreviewStore} from "@/stores/modules/xzPreviewStore";
import {onMounted, ref} from "vue";
import {queryonUpdateDataFrom} from "@/utils/onUpdateDataUtils.js";

const usePreStore = usePreviewStore();
let isPrintInfo = ref(true);
let xzreportdesigner_version=ref(0);
//初始数据；假定报表设计器是根据这个这个初始数据的表结构设计的，回显可以用这个数据；否则。。。。

const option = {
  mode: 'read',  //  报表模式  read | edit  只读模式|编辑模式
  view: {
    width: () => document.documentElement.clientWidth,
    height: () => document.documentElement.clientHeight
  },   // 设置报表的宽高
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: true,
};

let spreadSheet;

onMounted(() => {
  spreadSheet = XZReport("#reportPreview_tabs1_echo", option);
  xzreportdesigner_version.value=XZReport.version;


})
const preview = () => {
  if (usePreStore.xzReportDesigners.size > 0 && usePreStore.xzReportDesigners.has(reportDesignerId)) {
    let {config, data} = usePreStore.xzReportDesigners.get(reportDesignerId)
      //新的版本，导致getData()的data不会出现[]的场景，json数据集，会是一个完整的数据；外部数据集，会是一个描述信息，但是描述信息的内部的response_data为空
      spreadSheet.update(config, data);//如果是json数据集+外部数据集同时出现了，会如何？
  } else {
    if (isPrintInfo.value)
      console.log('清除了缓存，展现也要清空');
    document.getElementById("reportPreview_tabs1_echo").innerHTML = "";//不可以缺少，因为点击preview时候，config是有可能变了。
    spreadSheet = XZReport("#reportPreview", option);
    spreadSheet.update();
  }
}

const onUpdateData = (datasets, params) => {
  console.log("datasets:", datasets, "params:", params);
  return new Promise((resolve, reject) => {
    let __rtn=[];
    try {
        let {__updateData} = usePreStore.xzReportDesigners.get('xzReportDesignerTabs1')
        __rtn = queryonUpdateDataFrom( datasets,params,__updateData)
    } catch (error) {
      console.log("---------testRepport,", error);
    }
    resolve(__rtn);
  })
}
option.onUpdateData = onUpdateData


const get_onUpdateDatasetlist = () => {
  if (usePreStore.xzReportDesigners.has('xzReportDesignerTabs1')) {//哪个设计器保存的数据
    let {__updateDatasetList} = usePreStore.xzReportDesigners.get('xzReportDesignerTabs1')
      console.log("...xzReportDesignerTabs1_echo,从pinia里拿到的__updateDatasetList:", __updateDatasetList)
    return __updateDatasetList;
  } else {
    return [];
  }
}

function onUpdateDatasetList() {
  console.log("onUpdateDatasetList  is called")

  return new Promise((resolve, reject) => {

    resolve(get_onUpdateDatasetlist());

  })
}

option.onUpdateDatasetList = onUpdateDatasetList


</script>

<style scoped>

</style>
